<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx }/res/css/style.css">
    <link rel="stylesheet" href="${ctx }/res/css/msg.css">
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <style type="text/css">
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
		
		a {
			cursor:pointer;
		}
		
		*{ margin:0; padding:0}
		select,input{font-family:Microsoft YaHei}
		.text{ width:100%; height:38px;border:#ccc solid 1px; padding:0 2%; margin:0 0 20px 0; color:#888; font-size:14px;}
		.button{ width:100%; background:#ed145b; border:none; overflow:hidden; cursor:pointer; font-size:18px; color:#fff; text-align:center; height:40px; line-height:40px; margin:20px 0 0px;}
		.select{ width:110px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px; margin-right:10px}
		.select1{ width:160px;border:#ccc solid 1px; height:40px; margin:0px 0; float:left; font-size:14px;}
    </style>
	<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img.scrollLoading").lazyload({effect: "fadeIn",threshold :300});  
          $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
      });
    </script>
    <title>软装到家</title>
</head>
<body>
<%@include file="../head.jsp" %>
 
<!--主焦点图-->
<div class="slider  w-100p ">
    <ul class="bxslider">
        <%-- <li><img src="${ctx }/res/img/other/slider-1.jpg"/></li>
        <li><img src="${ctx }/res/img/other/slider-1.jpg"/></li>
        <li><img src="${ctx }/res/img/other/slider-1.jpg"/></li> --%>
        <c:forEach items="${ads }" var="ad" varStatus="ads">
        	<li><img src="${ad.image }"/>
        </c:forEach>
    </ul>
</div>
<!--刷选-->
<div class="w-1200 sub-nav margin-0-auto" style="height:36px;">
 <span style="color:black;">请选择运营商所在城市：</span>
<div class="citys" style="display:inline;left:170px;top:-32px;">
    <div class="current-city js-current-city">
    	<%-- <c:choose>
     	<c:when test="${currentCity == null}">
     		东莞
     	</c:when>
     	<c:otherwise>
     		${currentCity.name }
     	</c:otherwise>
    	</c:choose> --%>
    	${gpsAddress.city.name }
    </div>
    <div class="citys-list" style="top:55px;">
        <div class="label">热门城市:</div>
        <ul>
            <c:forEach items="${cities }" var="c" varStatus="cs">
            	<li class="js-city" data-city-id="${c.id }" data-city-name="${c.name }">${c.name }</li>
            </c:forEach>
        </ul>
        <span  class="js-city all-city" data-city="{name:'全部城市',id:'9999'}">全部城市</span>
    </div>
</div>
</div>
<script type="text/javascript">
    $(function () {
        $(document).on('click','.js-city',function (e) {
            var city = $(e.currentTarget).data();
            if(city.cityId != '' && city.cityId != '9999') {
            	var json = {"cityId":city.cityId};
            	$.ajax({
            		url: "${ctx}/changeCity",
            		data:json,
            		dataType: "json",
            		type: "get",
            		async:"false",
            		success: function(data) {
            			if (data.success) {
            				//loading带文字
            				 $('.js-current-city').html(city.cityName);
            				 var cities = $('#choosen_city li');
            				 for(var i = 0;i < cities.length;i ++ ) {
            					 var theLi = $(cities[i]);
            					 var data = theLi.data();
            					 if(data.objId == city.cityId) {
            						 theLi.find('a').addClass('on');
            						 theLi.click();
            						 break;
            					 }
            				 }
            			} else {
            				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
            			}
            		}
            	});
            }
        })
    })
</script>
<div class="w-1200 margin-0-auto">
	<div class="model_choice">
    	<div class="l">
        	<em>城市：</em>
            <span>
            	<c:choose>
	            	<c:when test="${cityId == null }">
	            		<a onclick="selectAll(this)" class="on">全部</a>
	            	</c:when>
	            	<c:otherwise>
	            		<a onclick="selectAll(this)">全部</a>
	            	</c:otherwise>
            	</c:choose>
            </span>
            <ul id="choosen_city">
            	<c:forEach items="${cities }" var="c" varStatus="cs">
            		<li data-obj-id="${c.id }" data-obj-name="${c.name }">
            			<c:choose>
	            		<c:when test="${cityId != null and cityId == c.id }">
		            		<a href="#" class="on">${c.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a href="#">${c.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
            	<!-- <li><a href="#">北京</a></li><li><a href="#">上海</a></li><li><a href="#">广州</a></li><li><a href="#">深圳</a></li><li><a href="#">杭州</a></li><li><a href="#">成都</a></li>
                <li><a href="#">长沙</a></li><li><a href="#">深圳</a></li><li><a href="#">西安</a></li><li><a href="#">南京</a></li><li><a href="#">昆明</a></li><li><a href="#">云南</a></li><li><a href="#">岳阳</a></li>
                <li><a href="#">长沙</a></li><li><a href="#">深圳</a></li><li><a href="#">西安</a></li><li><a href="#">南京</a></li><li><a href="#">昆明</a></li><li><a href="#">云南</a></li><li><a href="#">岳阳</a></li> -->
            </ul>
            <div class="blank10"></div>
            <em>区域：</em>
            <span>
            	<c:choose>
	            	<c:when test="${districtId == null}">
	            		<a onclick="selectAll(this)" class="on">全部</a>
	            	</c:when>
	            	<c:otherwise>
	            		<a onclick="selectAll(this)" href="#">全部</a>
	            	</c:otherwise>
            	</c:choose>
            </span>
            <ul id="choosen_district">
            	<c:forEach items="${districts }" var="d" varStatus="ds">
            		<li data-obj-id="${d.id }" data-obj-name="${d.name }">
            			<c:choose>
            			<c:when test="${districtId != null and districtId == d.id }">
		            		<a onclick="selectAll(this)" class="on">${d.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a onclick="selectAll(this)">${d.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
            	<!-- <li><a href="#">莞城区</a></li><li><a href="#">东城区</a></li><li><a href="#">南城区</a></li><li><a href="#">万江区</a></li><li><a href="#">石龙镇</a></li><li><a href="#">茶山镇</a></li>
                <li><a href="#">企石镇</a></li><li><a href="#">桥头镇</a></li><li><a href="#">横沥镇</a></li><li><a href="#">虎门镇</a></li><li><a href="#">长安镇</a></li><li><a href="#">沙田镇</a></li><li><a href="#">寮步镇</a></li> -->
            </ul>
            <div class="blank10"></div>
            <em>楼盘：</em>
            <span>
            	<c:choose>
	            	<c:when test="${communityId == null}">
	            		<a onclick="selectAll(this)" class="on">全部</a>
	            	</c:when>
	            	<c:otherwise>
	            		<a onclick="selectAll(this)">全部</a>
	            	</c:otherwise>
            	</c:choose>
            </span>
            <ul id="choosen_community">
            	<c:forEach items="${communities }" var="c" varStatus="cs">
            		<li data-obj-id="${c.id }" data-obj-name="${c.name }">
            			<c:choose>
            			<c:when test="${communityId != null and communityId == c.id }">
		            		<a onclick="selectAll(this)" class="on">${c.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a onclick="selectAll(this)">${c.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
            	<!-- <li><a href="#">江南第一城</a></li><li><a href="#">城市风景</a></li><li><a href="#">金地格林小城</a></li><li><a href="#">江南雅筑</a></li><li><a href="#">东骏豪苑</a></li>
                <li><a href="#">上东国际</a></li><li><a href="#">江南第一城</a></li><li><a href="#">城市风景</a></li><li><a href="#">金地格林小城</a></li><li><a href="#">江南雅筑</a></li><li><a href="#">东骏豪苑</a></li> -->
            </ul>
            <div class="blank10"></div>
            <em>户型：</em>
            <span>
            	<c:choose>
	            	<c:when test="${communityHouseTypeId == null}">
	            		<a onclick="selectAll(this)" class="on">全部</a>
	            	</c:when>
	            	<c:otherwise>
	            		<a onclick="selectAll(this)">全部</a>
	            	</c:otherwise>
            	</c:choose>
            </span>
            <ul id="choosen_communityHouseType">
            	<c:forEach items="${communityHouseTypes }" var="h" varStatus="hs">
            		<li data-obj-id="${h.id }" data-obj-name="${h.name }">
            			<c:choose>
            			<c:when test="${communityHouseTypeId != null and communityHouseTypeId == h.id }">
		            		<a onclick="selectAll(this)" class="on">${h.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a onclick="selectAll(this)">${h.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
            	<!-- <li><a href="#">一居</a></li><li><a href="#">二居</a></li><li><a href="#">三居</a></li><li><a href="#">四居</a></li><li><a href="#">五居</a></li><li><a href="#">五居以上</a></li> -->
            </ul>
            <div class="blank10"></div>
            <em>风格：</em>
            <span>
            	<c:choose>
	            	<c:when test="${houseStyleId == null}">
	            		<a onclick="selectAll(this)" class="on">全部</a>
	            	</c:when>
	            	<c:otherwise>
	            		<a onclick="selectAll(this)">全部</a>
	            	</c:otherwise>
            	</c:choose>
            </span>
            <ul id="choosen_houseType">
            	<c:forEach items="${houseStyles }" var="hs" varStatus="hss">
            		<li data-obj-id="${hs.id }" data-obj-name="${hs.name }">
            			<c:choose>
            			<c:when test="${houseStyleId != null and houseStyleId == hs.id }">
		            		<a href="#" class="on">${hs.name }</a>
		            	</c:when>
		            	<c:otherwise>
		            		<a href="#">${hs.name }</a>
		            	</c:otherwise>
		            	</c:choose>
            		</li>
            	</c:forEach>
            	<!-- <li><a href="#">一居</a></li><li><a href="#">二居</a></li><li><a href="#">三居</a></li><li><a href="#">四居</a></li><li><a href="#">五居</a></li><li><a href="#">五居以上</a></li> -->
            </ul>
        </div>
        <div class="r">
          <h1>预约设计</h1>
          <div class="blank10"></div>
          <input type="text" value="姓名" id="name" onfocus="if(value=='姓名') {value=''}" onblur="if (value=='') {value='姓名'}" class="text">
          <input type="text" value="手机号" id="mobile" onfocus="if(value=='手机号') {value=''}" onblur="if (value=='') {value='手机号'}" class="text">
          <select name="" class="select" id="provinceId">
             <option value="">省份</option>
             <c:forEach items="${provinces }" var="p">
             <option value="${p.id }">${p.name }</option>
             </c:forEach>
          </select>
		  <select name="" class="select" id="cityId">
          	<option value="">城市</option>
          </select>
          <select name="" class="select1" id="communityId">
             <option value="">楼盘</option>
          </select>
          <input name="" type="button" class="button" value="一键预约" id="btn" onClick="order2();">
        </div>
    </div>
</div>
<script type="text/javascript">
function a(){     
	$.fn.msg.alert("提示信息",ok); 
}
function ok() {
	console.log(1);		
}
</script>
<!--刷选 END-->
<div class="w-1200 margin-0-auto">
	<a href="#"><img class="scrollLoading" data-original="${ctx }/res/img/other/ad-2.jpg" /></a>
</div>
<div class="blank10"></div><div class="blank10"></div>
<!--TAB-->
<div class="w-1200 margin-0-auto">
	<div class="modelTab scrollLoading1">
        <div class="hd">
            <ul><li>案例</li><!-- <li>设计师</li> --></ul>
        </div>
        <div class="bd">
        	<!--案例-->
            <div>
            <c:forEach items="${communityHouseTypes }" var="cht">
            <div class="model_case">
            	<div class="title">
                	<h1>${cht.community.name }</h1>
                    <a href="${ctx }/design/listByCommunityHouseType?id=${cht.id}" class="more">更多</a>
                </div>
                <div class="l">
                	<div class="img"><img data-original="${cht.image }"></div>
                    <div class="t">地区：${cht.community.province.name } ${cht.community.city.name } ${cht.community.district.name }<br>户型：${cht.name }<br>面积：${cht.area }m²</div>
                </div>
                <div class="r">
                	<ul>
                    	<c:forEach items="${cht.designs }" var="d">
                    	<li>
                        	<div class="img"><a href="${ctx }/design/detail?id=${d.id}"><img data-original="${d.headImage }"></a><a class="btn" onclick="orderDesigner(${d.designer.id});">一键预约</a></div>
                            <div class="portrait">
                                <a href="${ctx }/design/designer?id=${d.designer.id}"><img src="${d.headImage }"></a>
                                <a href="${ctx }/design/designer?id=${d.designer.id}"><div class="portrait_bg"><img src="${d.user.headImage }"></div></a>
                                <a href="${ctx }/design/designer?id=${d.designer.id}"><div class="tit">${d.user.realName }</div></a>
                            </div>
                            <div class="tr"><h1>${cht.name }</h1><p>${cht.community.city.name } ${cht.community.district.name } ${cht.area}m² ${cht.name }</p></div>
                        </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            </c:forEach>
            </div>
            <!--案例 END-->
            <!--设计师-->
            <%--  <div>
            <!--推荐设计师-->
            <div class="w-1200 margin-0-auto">
                <div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
                <div class="model_designer">
                <div class="title">
                    <h1>推荐设计师</h1>
                    <a class="sNext">></a>
                    <a class="sPrev"><</a>
                </div>
                    <div class="bd scrollLoading1" style="border-bottom:1px solid #ccc; margin-bottom:25px;border-top:none">
                        <ul>
                            <c:forEach items="${designers }" var="d">
                            <li>
                                <div class="img"><a href="${ctx }/design/designer?id=${d.id}"><img data-original="${d.user.headImage }"></a><a class="btn" onclick="orderDesigner(${d.id});">一键预约</a></div>
                                <div class="pic">
                                    <c:forEach items="${d.images }" var="i">
                                    <img data-original="${i }">
                                    </c:forEach>
                                </div>
                                <h1>${d.user.username }<span>设计师<font class="fr" style="padding-top:8px">从业${d.workAge }年</font></span></h1>
                                <p>${d.company }设计师</p>
                            </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
<script type="text/javascript">jQuery(".model_designer").slide({ mainCell:".bd ul",effect:"leftLoop",vis:4,autoPlay:"true",prevCell:".sPrev",nextCell:".sNext",triggerEvent:true});</script>  
<!--推荐设计师 END-->
            <div class="title">
                <h1>设计师</h1>
            </div>
            <div class="model_designer">
            	<ul>
                	 <c:forEach items="${designers }" var="d">
                            <li>
                                <div class="img"><a href="${ctx }/design/designer?id=${d.id}"><img data-original="${d.user.headImage }"></a><a class="btn" onclick="orderDesigner(${d.id});">一键预约</a></div>
                                <div class="pic">
                                    <c:forEach items="${d.images }" var="i">
                                    <img data-original="${i }">
                                    </c:forEach>
                                </div>
                                <h1>${d.user.username }<span>设计师<font class="fr" style="padding-top:8px">从业${d.workAge }年</font></span></h1>
                                <p>${d.company }设计师</p>
                            </li>
                     </c:forEach>
                </ul>
            </div>
            </div> --%>
            <!--设计师 END-->
        </div>
    </div>
    <script type="text/javascript">jQuery(".modelTab").slide({trigger:"click",triggerEvent:true});</script> 
</div>        
<!--TAB END-->
<div class="blank10"></div><div class="blank10"></div><div class="blank10"></div>
<div id="designOrder_div" style="display:none;">
<div id="order_div">
	<form>
		<input type="hidden" name="designerId" value="${designer.id }" />
		<input type="text" value="姓名" name="name" onfocus="if(value=='姓名') {value=''}" onblur="if (value=='') {value='姓名'}" class="text" id="name">
		<input type="text" value="手机号" name="mobile" onfocus="if(value=='手机号') {value=''}" onblur="if (value=='') {value='手机号'}" class="text" id="moblie">
		<select name="provinceId" class="select">
		 <option value="1">湖南省</option>
		 <option value="2">广州省</option>
		</select>
		<select name="cityId" class="select">
		 <option value="3">长沙市</option>
		 <option value="3">岳阳市</option>
		</select>
		<select name="communityId" class="select1">
		 <option value="1">北京大观园</option>
		</select>
		<input name="" type="button" class="button" onclick="return doOrder(this);" value="一键预约" id="btn">
	</form>
</div>
</div>
<!--分页-->
<%@include file="../page.jsp" %>
<%@include file="../foot.jsp" %>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script type="text/javascript" src="${ctx }/res/js/common.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
	function gotoPage(pageNum) {   //跳转到指定页面
		location="${ctx}/design/index?page="+pageNum;
	}
	
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
        $('#choosen_city li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_district li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_community li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_communityHouseType li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
        $('#choosen_houseType li').on('click',function() {
        	changeChoose(this);
        	gotoWhenSelected();
        });
    }); 
    
    function selectAll(obj) {  //选择全部
    	var span = $(obj).parent();
    	var lis = $(span).next('ul').find('li a');
    	lis.removeClass('on');
    	gotoWhenSelected();
    }
    
    function gotoWhenSelected() {   //查找选择
    	var citys = $('#choosen_city').find('.on');
    	var choosenCity = '';
    	if(citys.length > 0) {
    		var parentLi = $(citys[0]).parents('li');
    		var data = $(parentLi).data();
    		choosenCity = data.objId;
    	}
    	
    	var districts = $('#choosen_district').find('.on');
    	var choosen_district = '';
    	if(districts.length > 0) {
    		var parentLi = $(districts[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_district = data.objId;
    	}
    	
    	var communities = $('#choosen_community').find('.on');
    	var choosen_community = '';
    	if(communities.length > 0) {
    		var parentLi = $(communities[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_community = data.objId;
    	}
    	
    	var houseTypes = $('#choosen_communityHouseType').find('.on');
    	var choosen_houseType = '';
    	if(houseTypes.length > 0) {
    		var parentLi = $(houseTypes[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_houseType = data.objId;
    	}
    	
    	var houseStyles = $('#choosen_houseType').find('.on');
    	var choosen_houseStyle = '';
    	if(houseStyles.length > 0) {
    		var parentLi = $(houseStyles[0]).parents('li');
    		var data = $(parentLi).data();
    		choosen_houseStyle = data.objId;
    	}
    	location = '${ctx}/design/index?cityId='+choosenCity+"&districtId="+choosen_district+"&communityId="+choosen_community+"&communityHouseTypeId="+choosen_houseType+"&houseStyleId="+choosen_houseStyle;	
    }
    
    function changeChoose(obj) {
    	var lis = $(obj).parents('ul').find('li a');
    	lis.removeClass("on");
    	$(obj).find('a').addClass('on');
    }

    $('#provinceId').change(function() {
    	$.ajax({
    		url: "${ctx}/province/findArea",
    		data: {
    			provinceId: $('#provinceId').val()
    		},
    		dataType: "json",
    		success: function(data) {
    			$('#cityId').html('');
    			$('#cityId').append('<option value="">城市</option>');
				for (var i = 0; i < data.length; i++) {
					var obj = data[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#cityId').append(option);	
				}
    		}
    		
    	});
    });
    
    $('#cityId').change(function() {
    	$.ajax({
    		url: "${ctx}/design/findCommunityByCity",
    		data: {
    			cityId: $('#cityId').val()
    		},
    		dataType: "json",
    		success: function(data) {
    			$('#communityId').html('');
    			$('#communityId').append('<option value="">楼盘</option>');
				for (var i = 0; i < data.length; i++) {
					var obj = data[i];
					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
					$('#communityId').append(option);	
				}
    		}
    		
    	});	
    });
    
    function order() {
    	$.ajax({
    		url: "${ctx}/design/orderDesigner",
    		data: {
    			name: $('#name').val(),
    			mobile: $('#mobile').val(),
    			provinceId: $('#provinceId').val(),
    			cityId: $('#cityId').val(),
    			communityId: $('#communityId').val()
    		},
    		dataType: "json",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				alert2('预约成功');
    			} else {
    				alert2(data.msg);
    			}
    		}
    		
    	});	
    }
    
    // 一键预约
    function order2() {
    	//window.yysj("<iframe src='/model/yysj.html' width='100%' height='175px' frameborder='0' scrolling='no'></iframe>"); 
    	$.ajax({
    		url: "${ctx}/design/orderDesigner",
    		data: {
    			name: $('#name').val(),
    			mobile: $('#mobile').val(),
    			provinceId: $('#provinceId').val(),
    			cityId: $('#cityId').val(),
    			communityId: $('#communityId').val()
    		},
    		dataType: "json",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				layer.msg('预约成功，请耐心等待!',{time: 1000, icon:6,shade: [0.5, '#f5f5f5']});
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    		
    	});	
    }
</script>
</body>
</html>